<template>
  <!--
    theme 主题颜色 string: light dark
-->
  <a-layout-sider :theme="sideTheme"> </a-layout-sider>
</template>

<script>
import { computed, toRefs } from 'vue'
export default {
  props: {
    // 是否可收起
    collapsible: {
      type: Boolean,
      required: false,
      default: false,
    },
    // 当前收起状态
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    // 菜单数组
    data: {
      type: Array,
      required: true,
    },
    // 主题颜色
    theme: {
      type: String,
      required: false,
      default: 'dark',
    },
  },
  setup(props) {
    // 主题样式
    const sideTheme = computed(() => {
      return props.theme == 'light' ? props.theme : 'dark'
    })
    
    return { ...toRefs(props), sideTheme }
  },
}
</script>

<style></style>
